<html>
<!--
Copyright (c) 2017, Apps4Av Inc. (apps4av.com)
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
    *     * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    *
    *     THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

authors: zkhan
-->

<head>

    <!-- Latest compiled and minified CSS -->
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="bootstrap-select.min.js"></script>
    <script src="bootbox.min.js"></script>
    <script src="toastr.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-select.min.css">
    <link rel="stylesheet" href="toastr.min.css">
    <style type="text/css">
        button {color: black; height:40px;}
        input {height:40px; border-radius: 5px;}
        .toast {opacity: 1 !important;}
    </style>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" >

	toastr.options.timeOut = 2000;

// put data in W&B sheet
function wnb_set(data) {

    var obj = JSON.parse(data);

    document.getElementById("wnb_name").textContent = "W&B" + "[" + obj.name + "]";

    document.getElementById("t0").value = obj.t_0;
    document.getElementById("t1").value = obj.t_1;
    document.getElementById("t2").value = obj.t_2;
    document.getElementById("t3").value = obj.t_3;
    document.getElementById("t4").value = obj.t_4;
    document.getElementById("t5").value = obj.t_5;
    document.getElementById("t6").value = obj.t_6;
    document.getElementById("t7").value = obj.t_7;
    document.getElementById("t8").value = obj.t_8;
    document.getElementById("t9").value = obj.t_9;

    document.getElementById("w0").value = obj.w_0;
    document.getElementById("w1").value = obj.w_1;
    document.getElementById("w2").value = obj.w_2;
    document.getElementById("w3").value = obj.w_3;
    document.getElementById("w4").value = obj.w_4;
    document.getElementById("w5").value = obj.w_5;
    document.getElementById("w6").value = obj.w_6;
    document.getElementById("w7").value = obj.w_7;
    document.getElementById("w8").value = obj.w_8;
    document.getElementById("w9").value = obj.w_9;

    document.getElementById("a0").value = obj.a_0;
    document.getElementById("a1").value = obj.a_1;
    document.getElementById("a2").value = obj.a_2;
    document.getElementById("a3").value = obj.a_3;
    document.getElementById("a4").value = obj.a_4;
    document.getElementById("a5").value = obj.a_5;
    document.getElementById("a6").value = obj.a_6;
    document.getElementById("a7").value = obj.a_7;
    document.getElementById("a8").value = obj.a_8;
    document.getElementById("a9").value = obj.a_9;

    document.getElementById("m0").textContent = "";
    document.getElementById("m1").textContent = "";
    document.getElementById("m2").textContent = "";
    document.getElementById("m3").textContent = "";
    document.getElementById("m4").textContent = "";
    document.getElementById("m5").textContent = "";
    document.getElementById("m6").textContent = "";
    document.getElementById("m7").textContent = "";
    document.getElementById("m8").textContent = "";
    document.getElementById("m9").textContent = "";

    document.getElementById("w_total").textContent = "";
    document.getElementById("m_total").textContent = "";
    document.getElementById("a_total").textContent = "";

    document.getElementById("max_w").value = obj.max_w;
    document.getElementById("min_w").value = obj.min_w;
    document.getElementById("max_a").value = obj.max_a;
    document.getElementById("min_a").value = obj.min_a;

    document.getElementById("points").value = obj.points;
}


// put data from W&B sheet
function wnb_get(name) {

    var obj = new Object();

    obj.name = name;

    obj.t_0 = document.getElementById("t0").value;
    obj.t_1 = document.getElementById("t1").value;
    obj.t_2 = document.getElementById("t2").value;
    obj.t_3 = document.getElementById("t3").value;
    obj.t_4 = document.getElementById("t4").value;
    obj.t_5 = document.getElementById("t5").value;
    obj.t_6 = document.getElementById("t6").value;
    obj.t_7 = document.getElementById("t7").value;
    obj.t_8 = document.getElementById("t8").value;
    obj.t_9 = document.getElementById("t9").value;

    obj.w_0 = document.getElementById("w0").value;
    obj.w_1 = document.getElementById("w1").value;
    obj.w_2 = document.getElementById("w2").value;
    obj.w_3 = document.getElementById("w3").value;
    obj.w_4 = document.getElementById("w4").value;
    obj.w_5 = document.getElementById("w5").value;
    obj.w_6 = document.getElementById("w6").value;
    obj.w_7 = document.getElementById("w7").value;
    obj.w_8 = document.getElementById("w8").value;
    obj.w_9 = document.getElementById("w9").value;

    obj.a_0 = document.getElementById("a0").value;
    obj.a_1 = document.getElementById("a1").value;
    obj.a_2 = document.getElementById("a2").value;
    obj.a_3 = document.getElementById("a3").value;
    obj.a_4 = document.getElementById("a4").value;
    obj.a_5 = document.getElementById("a5").value;
    obj.a_6 = document.getElementById("a6").value;
    obj.a_7 = document.getElementById("a7").value;
    obj.a_8 = document.getElementById("a8").value;
    obj.a_9 = document.getElementById("a9").value;

    obj.max_w = document.getElementById("max_w").value;
    obj.min_w = document.getElementById("min_w").value;
    obj.max_a = document.getElementById("max_a").value;
    obj.min_a = document.getElementById("min_a").value;

    obj.points = document.getElementById("points").value;

    return JSON.stringify(obj);

}


function process_input(inp) {
    var fl = parseFloat(inp);
    if(inp == '') {
        return 0;
    }
    return fl;
}

function round100(num) {
    return (Math.round(num * 100.0) / 100.0);
}

function wnb_calculate() {

    var w_0 = process_input(document.getElementById("w0").value);
    var w_1 = process_input(document.getElementById("w1").value);
    var w_2 = process_input(document.getElementById("w2").value);
    var w_3 = process_input(document.getElementById("w3").value);
    var w_4 = process_input(document.getElementById("w4").value);
    var w_5 = process_input(document.getElementById("w5").value);
    var w_6 = process_input(document.getElementById("w6").value);
    var w_7 = process_input(document.getElementById("w7").value);
    var w_8 = process_input(document.getElementById("w8").value);
    var w_9 = process_input(document.getElementById("w9").value);

    var a_0 = process_input(document.getElementById("a0").value);
    var a_1 = process_input(document.getElementById("a1").value);
    var a_2 = process_input(document.getElementById("a2").value);
    var a_3 = process_input(document.getElementById("a3").value);
    var a_4 = process_input(document.getElementById("a4").value);
    var a_5 = process_input(document.getElementById("a5").value);
    var a_6 = process_input(document.getElementById("a6").value);
    var a_7 = process_input(document.getElementById("a7").value);
    var a_8 = process_input(document.getElementById("a8").value);
    var a_9 = process_input(document.getElementById("a9").value);

    var m_0 = w_0 * a_0;
    var m_1 = w_1 * a_1;
    var m_2 = w_2 * a_2;
    var m_3 = w_3 * a_3;
    var m_4 = w_4 * a_4;
    var m_5 = w_5 * a_5;
    var m_6 = w_6 * a_6;
    var m_7 = w_7 * a_7;
    var m_8 = w_8 * a_8;
    var m_9 = w_9 * a_9;

    document.getElementById("m0").textContent = round100(m_0);
    document.getElementById("m1").textContent = round100(m_1);
    document.getElementById("m2").textContent = round100(m_2);
    document.getElementById("m3").textContent = round100(m_3);
    document.getElementById("m4").textContent = round100(m_4);
    document.getElementById("m5").textContent = round100(m_5);
    document.getElementById("m6").textContent = round100(m_6);
    document.getElementById("m7").textContent = round100(m_7);
    document.getElementById("m8").textContent = round100(m_8);
    document.getElementById("m9").textContent = round100(m_9);

    var w_total = w_0 + w_1 + w_2 + w_3 + w_4 + w_5 + w_6 + w_7 + w_8 + w_9;
    var m_total = m_0 + m_1 + m_2 + m_3 + m_4 + m_5 + m_6 + m_7 + m_8 + m_9;
    var a_total = m_total / w_total;

    document.getElementById("w_total").textContent = round100(w_total);
    document.getElementById("m_total").textContent = round100(m_total);
    document.getElementById("a_total").textContent = round100(a_total); // cg

    // now draw on canvas
    max_w = process_input(document.getElementById("max_w").value);
    min_w = process_input(document.getElementById("min_w").value);
    max_a = process_input(document.getElementById("max_a").value);
    min_a = process_input(document.getElementById("min_a").value);


    // draw rectangle
    diff_w = max_w - min_w;
    diff_a = max_a - min_a;

    var canvas = document.getElementById('wnb_canvas');
    var width = canvas.width;
    var height = canvas.height;

    var ratio_x = width / diff_a;
    var ratio_y = height / diff_w;

    var ctx = canvas.getContext("2d");
    ctx.fillStyle="#000000";
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle="#FFFFFF";

    var x = (a_total - min_a) * ratio_x;
    var y = (w_total - min_w) * ratio_y;

    // draw envelope from points entered as w0,a0 w1,a1 ...
    points = document.getElementById("points").value;
    var pairs = points.split(" ");
    ctx.fillStyle="#AA0000";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle="#00AA00";
    ctx.beginPath();
    for (var i = 0; i < pairs.length; i++) {
        var xy = pairs[i].split(",");
        var x_p = (xy[0] - min_a) * ratio_x;
        var y_p = (xy[1] - min_w) * ratio_y;
        if(0 == i) {
            ctx.moveTo(x_p, height - y_p);
        }
        else {
            ctx.lineTo(x_p, height - y_p);
        }
    }
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(x - 3, height - y - 3, 6, 6);

    ctx.beginPath();
    ctx.arc(x, height - y, 9, 0, 2*Math.PI);
    ctx.stroke();
    ctx.closePath();

}


var CELL_SAVE_NAME = 0;
var CELL_SAVE_LOAD = 1;
var CELL_SAVE_DELETE = 2;
var CELL_SAVE_LAST = 3;

// delete the wnb
function save_delete(row) {

	bootbox.confirm("Delete Saved?", function(result) {
		if(result == false) {
			return;
		}
    	var wnb_save = document.getElementById("save_table");
	    AndroidWnb.saveDelete(wnb_save.rows[row].cells[CELL_SAVE_NAME].textContent);
	    toastr.success('W&B deleted');
	});

}

// load the wnb
function save_load(row) {
	var wnb_save = document.getElementById("save_table");
	AndroidWnb.loadWnb(wnb_save.rows[row].cells[CELL_SAVE_NAME].textContent);
	document.getElementById("wnb_name").scrollIntoView();
	$('[href="#wnb"]').tab('show');
}

// add the current wnb to saved wnb
function save_wnb_add() {
	var name = document.getElementById("save_name").value;

	if(name == "") {
		toastr.error('Please specify a valid name');
		return;
	}

	var data = wnb_get(name);
	AndroidWnb.saveWnb(data);
	toastr.success('W&B saved to ' + name);
}


// Sets buttons on each row
function set_buttons_save() {
	// Set buttons for each entry in wnb
	var wnb_save = document.getElementById("save_table");
	for(var i = 1; i < wnb_save.rows.length; i++) {
		wnb_save.rows[i].cells[CELL_SAVE_LOAD].innerHTML =
			"<button class='btn btn-block' onclick='save_load(" + i.toString() + ")'>LD</button>";
		wnb_save.rows[i].cells[CELL_SAVE_DELETE].innerHTML =
			"<button class='btn btn-block' onclick='save_delete(" + i.toString() + ")'>Del</button>";
	}

		// clear save input
	document.getElementById("save_name").value = "";
}

// clear the entire save list
function save_clear() {
	// clear the table
	var list_save = document.getElementById("save_table");
	for(var row = list_save.rows.length - 1; row >= 1; row--) {
			list_save.deleteRow(row);
	}
}

// add an item to the wnb
function save_add(name) {
	var wnb_save = document.getElementById("save_table");

	var row = wnb_save.insertRow(-1);

	var cell = [];

	// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
	cell[CELL_SAVE_NAME] = row.insertCell(CELL_SAVE_NAME);
	cell[CELL_SAVE_LOAD] = row.insertCell(CELL_SAVE_LOAD);
	cell[CELL_SAVE_DELETE] = row.insertCell(CELL_SAVE_DELETE);

	cell[CELL_SAVE_NAME].textContent = name;

	set_buttons_save();

}

$(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });

});


</script>

</head>

<body>


    <ul class="nav nav-tabs" style="display:inline-flex;">
      <li class="active"><a href="#wnb">W&B</a></li>
      <li><a href="#load">Load</a></li>
      <li><a href="#save">Save</a></li>
      <li><a href="#help">Help</a></li>
    </ul>

    <div class="tab-content">

      <div id="wnb" class="tab-pane fade in active">
          <table class="table">
              <tr>
                  <td><h3 ><span id="wnb_name" class="label label-success">W&B[]</span></h3></td>
              </tr>
          </table>
          <table class="table" id="wnb_table" ><th>Type</th><th>Weight</th><th>Arm/CG</th><th>Moment</th>
              <tr><td><input id="t0"></td><td><input id="w0"></td><td><input id="a0"></td><td><label id="m0"/></td></tr>
              <tr><td><input id="t1"></td><td><input id="w1"></td><td><input id="a1"></td><td><label id="m1"/></td></tr>
              <tr><td><input id="t2"></td><td><input id="w2"></td><td><input id="a2"></td><td><label id="m2"/></td></tr>
              <tr><td><input id="t3"></td><td><input id="w3"></td><td><input id="a3"></td><td><label id="m3"/></td></tr>
              <tr><td><input id="t4"></td><td><input id="w4"></td><td><input id="a4"></td><td><label id="m4"/></td></tr>
              <tr><td><input id="t5"></td><td><input id="w5"></td><td><input id="a5"></td><td><label id="m5"/></td></tr>
              <tr><td><input id="t6"></td><td><input id="w6"></td><td><input id="a6"></td><td><label id="m6"/></td></tr>
              <tr><td><input id="t7"></td><td><input id="w7"></td><td><input id="a7"></td><td><label id="m7"/></td></tr>
              <tr><td><input id="t8"></td><td><input id="w8"></td><td><input id="a8"></td><td><label id="m8"/></td></tr>
              <tr><td><input id="t9"></td><td><input id="w9"></td><td><input id="a9"></td><td><label id="m9"/></td></tr>
              <tr><td><label>Total</label></td><td><label id="w_total"/></td><td><label id="a_total"/></td><td><label id="m_total"/></td></tr>
          </table>

          <table class="table"><th>Graph</th>
            <tr>
                <td>
                    <canvas id="wnb_canvas" width="480" height="320" style="border:1px solid #FFFFFF;"/>
                </td>
                <td>
                    <input id="max_w" style="margin: 2px;" placeholder="Max Weight"><br>
                    <input id="min_w" style="margin: 2px;" placeholder="Min Weight"><br>
                    <input id="max_a" style="margin: 2px;" placeholder="Max Arm"><br>
                    <input id="min_a" style="margin: 2px;" placeholder="Min Arm"><br>
                    <input id="points" style="margin: 2px;" placeholder="Envelope Points (See Help)"><br>
                </td>
            </tr>
          </table>

      </div>


      <div id="load" class="tab-pane fade">
          <table class="table" id="save_table" ><th>Load a W&B</th></table>
      </div>


      <div id="save" class="tab-pane fade">
          <table class="table"><th>Save Current W&B</th>
              <tr>
                  <td><input id="save_name" spellcheck="false" placeholder="Current W&B Name"/></td>
                  <td><button class="btn btn-block" onclick="save_wnb_add()">Save</button></td>
              </tr>
          </table>
      </div>


      <div id="help" class="tab-pane fade">
          <table class="table"><th>Help</th></table>
          <div style="overflow: auto;">
              <u>You may need to disable Predictive Typing in Android Settings!</u><br>The WNB screen allows you to calculate weight and balance for your aircraft.
              <br>
              <b>To Create a W&B</b>
              <ul>
                  <li>Enter Type, Weight, and ARM for as many rows as needed.</li>
                  <li>Press Calculate button to update the W&B values of total weight, C.G. total moment, and per type moment values.</li>
                  <li>To show W&B limits graph, enter Max weight, Min weight, Max arm, and Min arm. These will set limits of the graph shown. Use POH to get these values.</li>
                  <li>Enter graph 2D coordinates for the envelope in clockwise or counter-clockwise direction. Use POH to get these values. Coordinates are separated by white space and in order of arm,weight e.g. 43,1650 43,2450 45,2450 45,1650</li>
                  <li>Press Calculate button again to show the W&B inside/outside the green envelope.</li>
              </ul>

              <b>To Save a W&B</b>
              <ul>
                  <li>Press the "Save" tab</li>
                  <li>To save a W&B, enter the name above the "Save" button, and press the "Save" Button.</li>
                  <li>Press the "Load" tab to confirm that the W&B was saved.</li>
              </ul>

              <b>To Load/Delete a Saved W&B</b>
              <ul>
                  <li>Press the "Load" tab to show the saved W&Bs.</li>
                  <li>Press the "LD" button to load the W&B.</li>
                  <li>You can delete a saved W&B by pressing the "Del" button to the right of its name in the Saved W&B.</li>
              </ul>

              <b>To Use a W&B</b>
              <ul>
              <li></li>
              </ul>
          </div>
      </div>
  </div>


</body>
</html>
